<template>
    <div class="body">
        <el-form label-position="top" :rules="state.rules" ref="changePasswordFormRef" :model="state.ruleForm" class="login-form">          
            <el-form-item label="旧密码" prop="password_old">
                <el-input v-model="state.ruleForm.password_old" autocomplete="off" ></el-input>
            </el-form-item>
           <el-form-item label="新密码（8-20为字母、数字）" prop="password_new">
                <el-input  v-model="state.ruleForm.password_new" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2_new">
                <el-input v-model="state.ruleForm.password2_new" autocomplete="off" ></el-input>
            </el-form-item>
            <el-button type="primary" @click="submitForm()" >提交</el-button>                  
          
      </el-form>
    </div>
    
</template>
  
<script setup>
import axios from '@/utils/axios'
import { reactive, ref } from 'vue'
import { localGet } from '@/utils'
import { ElMessage } from 'element-plus'

const changePasswordFormRef = ref(null)
// 验证手机号码是否合法
const checkTelephone =(rule, telephone, callback)=> {
    var reg=/^[1][3,4,5,7,8][0-9]{9}$/g;
    if (!reg.test(telephone)) {
        return false;
    } else {
        return true;
    }
  }
// 验证新密码的合法性
const checkPassword = (rule, password, callback)=>{
    var reg=/^\w{8,20}$/g
    if(!reg.test(password)){
        return false;
    }else{
        return true;
    }
}
let state = reactive({

  ruleForm: { 
    password_old: '',
    password_new: '',
    password2_new: '',
  },
  checked: true,
  rules: {   
    password_old: [
      { required: 'true', message: '请输入原始密码', trigger: 'blur' }
    ],
    password_new: [
      { required: 'true', message: '新密码不能空', trigger: 'blur' },
      {validator: checkPassword, trigger: 'blur'},
    ],
    password2_new: [
      { required: 'true', message: '新密码不能空', trigger: 'blur' },
      {validator: checkPassword, trigger: 'blur'},
    ],
  }
})
// 提交修改密码表单
const submitForm=()=>{
    let localUser = localGet('user_information')   
    changePasswordFormRef.value.validate((vaild, obj) => {
      if (vaild) {        
        axios.put(`/UserModelViewSet/${localUser.id}`, state.ruleForm).then((result) => {
          if(result.code==200){
            ElMessage.success( '操作成功！')                 
          }else{
            console.log("提交错误", result)
          }       
        }).catch((error)=>{
          console.log("更新密码错误：", error)
        })
      }else{                //输出表单没有通过的原因
        console.log("表单没有通过！",obj)
        for (let key in obj) {
          console.log("具体错误：",obj[key][0].message)          
        }   
      }
    })
}
</script>

<style scoped>
.body{
    border-style: solid;
    border-radius:2em;
    padding: 20px;
    margin-left: 100px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
.login-form {
    width: 100%;
    margin: 0 auto;
  }
</style>